<template>
  <div class="mybox">
    <div ref="chart" class="UseWaterBtm"></div>
  </div>
</template>
<script>
// import chart from './chart.vue'
import { getAction, postAction } from '@/api/manage'
import * as echarts from 'echarts'
export default {
  name: '',
  data () {
    return {
      oneData: [],
      twoData: [],
      threeData: []
    }
  },
  mounted () {
    this.initData()
  },
  methods: {
    initData () {
      postAction('/topic/data/listAllData/dy_dp_msjc_whjy_xxssqk', {}).then(res => {
        if (res.success) {
          res.result.data.map(item => {
            this.oneData.push(item.school_type)
            this.twoData.push(item.student_num)
            this.threeData.push(item.teacher_num)
          })
          this.initEcahrts(this.oneData, this.twoData, this.threeData)
        }
      })
    },
    initEcahrts (oneData, twoData, threeData) {
      this.chartInstance = echarts.init(this.$refs.chart)
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: '0%',
          left: '3%',
          right: '10%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          min: 0,
          splitNumber: 3,
          splitLine: {
            show: false
            // lineStyle: {
            //   color: '#ccc',
            //   type: 'line'
            // }
          },
          axisTick: {
            show: true
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
              fontSize: 16
            }
          }
        },
        yAxis: [
          {
            type: 'category',
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: '16'
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: oneData
          }
        ],
        dataZoom: [{
          type: 'slider',
          show: true,
          yAxisIndex: [0],
          width: 6,
          // backgroundColor: '#1A53DD',
          // borderRadius: 5,
          // borderColor: '#093683',
          // fillerColor: '#093683',
          left: '95%',
          start: 0,
          end: 60,
          realtime: true
        }],
        series: [
          {
            name: '学生数',
            type: 'bar',
            zlevel: 1,
            // label: {
            //   show: true,
            //   position: 'right',
            //   color: '#00c0fa',
            //   fontSize: 14,
            //   distance: 10
            // },
            itemStyle: {
              normal: {
                barBorderRadius: 0,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: '#2a77ea'
                  },
                  {
                    offset: 1,
                    color: '#00c0fa'
                  }
                ])
              }
            },
            barWidth: 10,
            data: twoData
          },
          {
            name: '教师数',
            type: 'bar',
            zlevel: 1,
            // label: {
            //   show: true,
            //   position: 'right',
            //   color: '#00c0fa',
            //   fontSize: 14,
            //   distance: 10
            // },
            itemStyle: {
              normal: {
                barBorderRadius: 0,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: '#ffc700'
                  },
                  {
                    offset: 1,
                    color: '#fbdf9c'
                  }
                ])
              }
            },
            barWidth: 10,
            data: threeData
          }
        ]
      }

      this.chartInstance.setOption(option)
    }
  }
}
</script>
<style lang="scss" scoped>
.mybox {
  .UseWaterBtm {
    width: 100%;
    height: 150px;
  }
}
</style>
